<template>
  <ele-page
    flex-table
    :multi-card="false"
    hide-footer
    style="min-height: 420px"
  >
    <!-- 搜索表单 -->
    <export-search
      @search="reload"
      :cache-key="getCurrentInstance().type.name"
    />
    <ele-card
      :body-style="{ paddingTop: '8px' }"
      flex-table
      :multi-card="false"
    >
      <!-- 表格 -->
      <ele-pro-table
        ref="tableRef"
        row-key="id"
        :pagination="pagination"
        :loading="loading"
        flex-table
        :columns="columns"
        :datasource="datasource"
        :show-overflow-tooltip="true"
        v-model:selections="selections"
        :highlight-current-row="true"
        :print-config="{ datasource: exportSource }"
        :cache-key="getCurrentInstance().type.name"
      >
        <template #toolbar>
          <el-button
            type="primary"
            class="ele-btn-icon"
            :icon="PlusOutlined"
            @click="openAdd()"
          >
            新建
          </el-button>

          <el-button
            type="danger"
            class="ele-btn-icon"
            :icon="DeleteOutlined"
            @click="action('remove')"
          >
            删除
          </el-button>
        </template>

        <template #progress="{ row }">
          <el-progress
            type="circle"
            :width="40"
            :stroke-width="2"
            :percentage="ride(row.progress, 100)"
          />
        </template>

        <template #status="{ row }">
          <ele-dot
            v-if="row.status === 0"
            type="heading"
            text="未开始"
            size="8px"
          />
          <ele-dot
            v-else-if="row.status === 1"
            text="导出中"
            type="warning"
            :ripple="false"
            size="8px"
          />
          <ele-dot
            v-else-if="row.status === 2"
            text="导出成功"
            type="success"
            :ripple="false"
            size="8px"
          />
          <ele-dot
            v-else-if="row.status === 3"
            text="导出失败"
            type="danger"
            :ripple="false"
            size="8px"
          />
          <ele-dot
            v-else-if="row.status === 4"
            text="重试失败"
            type="info"
            :ripple="false"
            size="8px"
          />
          <ele-dot
            v-else-if="row.status === 5"
            text="文件已删除"
            deleted
            type="danger"
            :ripple="false"
            size="8px"
          />
        </template>

        <template #action="{ row }">
          <el-link type="primary" underline="never" @click="openView(row)">
            查看
          </el-link>
          <el-divider direction="vertical" />
          <el-link
            type="danger"
            underline="never"
            @click="action('remove', row)"
          >
            删除
          </el-link>
        </template>
      </ele-pro-table>
    </ele-card>

    <!-- 修改 -->
    <export-edit
      action="view"
      :data="current"
      v-model="showView"
      @done="reload"
    />
  </ele-page>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";

import { PlusOutlined, DeleteOutlined } from "@/components/icons";
import ExportSearch from "./components/export-search.vue";
import ExportEdit from "./components/export-edit.vue";
import { pageExports, removeExports } from "@/api/base/export";
import { useOperator } from "@/hooks/operator";

import { useTable } from "@/hooks/useTable";
import { useModal } from "@/hooks/useModal";
import { ride } from "@/utils/decimal.js";

defineOptions({ name: "BaseExportTable" });
/** 表格列配置 */
const columns = ref([
  {
    type: "selection",
    columnKey: "selection",
    width: 50,
    align: "center",
    fixed: "left",
  },
  {
    prop: "id",
    columnKey: "id",
    width: 50,
    align: "center",
    fixed: "left",
  },
  {
    prop: "task_id",
    label: "任务id",
    minWidth: 140,
    copy: true,
  },
  {
    prop: "name",
    label: "名称",
    minWidth: 120,
    slot: "name",
  },
  {
    prop: "table_name",
    label: "表名",
    minWidth: 140,
  },
  {
    prop: "total",
    label: "总数",
    minWidth: 120,
  },
  {
    prop: "progress",
    label: "进度",
    minWidth: 120,
    slot: "progress",
  },

  {
    prop: "status",
    label: "状态",
    sortable: "custom",
    minWidth: 120,
    slot: "status",
  },
  {
    prop: "sort_number",
    label: "排序",
    sortable: "custom",
    minWidth: 60,
    align: "center",
  },
  {
    prop: "loss_time",
    label: "耗时（秒）",
    sortable: "custom",
    width: 100,
    align: "center",
    formatter: (row) => {
      return row.loss_time + "秒";
    },
  },
  {
    prop: "exec_time",
    label: "执行时间",
    sortable: "custom",
    width: 180,
    align: "center",
  },
  {
    columnKey: "action",
    label: "操作",
    width: 120,
    fixed: "right",
    align: "center",
    slot: "action",
    hideInPrint: true,
    hideInExport: true,
  },
]);

const {
  loading,
  pagination,
  tableRef,
  datasource,
  reload,
  current,
  selections,
} = useTable({
  getPages: pageExports,
  beforeQuery: (params) => {
    // 可以修改或添加查询参数
    console.log("查询参数:", params); // 调试用，实际不需要这一行
    return {
      ...params,
      ...params.where,
    };
  },
});

const { visible: showView, open: openView } = useModal({
  beforeOpen: async (row) => {
    current.value = row; // 设置当前行数据
    // if (!row?.editable) {
    //   throw new Error("没有编辑权限");
    // }
  },
});

/** 删除 */
// 替换原有的remove方法
const { action } = useOperator({
  actionConfigs: {
    remove: {
      title: "删除",
      confirmText: "确定要删除{%s}这些数据吗?",
      api: removeExports,
      beforeSubmit: (params) => {
        // 可以修改或添加提交参数
        console.log("[DEBUG] beforeSubmit 钩子被调用", params);
        return params; // 必须返回处理后的参数
      },
    },
  },
  selections,
  reload,
  idField: "id",
  idName: "table_name",
});
</script>

<style scoped>
/* 使用深度选择器修改进度条文本样式 */
::v-deep .el-progress--circle .el-progress__text {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 12px !important; /* 增大字体 */
  width: auto !important; /* 避免宽度限制 */
}
</style>
